import React, { Component } from 'react';
import ChildRef from './Child';
class ParentToChildRef extends Component {
    state = {  } 
    
    inputRef1 = React.createRef(null)
     
     handleIpt = () => {
       console.log('===', this.inputRef1.current.value)
    //    console.log('input内容', this.refs.inputRef.value)
     }
     
     componentDidMount () {
        this.inputRef1.current.focus()
     }
     
     handleFocus = () => {
        this.inputRef1.current.focus()
     
     }
     
     // refs 函数
     inputRef2 = null
     setHandleRef = (ref) => {
       this.inputRef2 = ref
     }
     
     handleIpt1 = () => {
       
        console.log('===setHandleRef',this.inputRef2, this.inputRef2.value)
      }
      
      /*
      * 1. ref值为字符串时，获取到的是真实的DOM，取值方法： this.refs.字符串名字.value // 但是官方废弃了这种写法
      * 2. React.createRef() // 用这个API创建的得到的是一个引用，取值：
            inputRef = React.createRef(null)
            this.inputRef.current.value 
        3. refs 函数 // 得到的是真实的DOM，取值方法：
             3.1 定义函数：setInputRef = (ref) => { this.inputRef1 = ref}
             3.2 给元素绑定ref <input ref={this.setInputRef} />
             3.3 取值： this.inputRef1.value
      */



     handleChildRef = () => {
       console.log('绑定在组件上的ref', this.refs.childRef1)
       const msg =this.refs.childRef1.say()
       console.log('msg-子组件', msg)
     }
     
     // React.createRef()
    
     createRefChild1 = React.createRef()
     handleChildRef1 = () => {
        console.log('绑定在组件上的ref/React.createRef()', this.createRefChild1)
        const msg =this.createRefChild1.current.say()
        console.log('msg-子组件', msg)
      }
      
      // ref函数
      createRefChild2 = null
      setCreateChildRef = (ref) => {
        this.createRefChild2 = ref
      }
      handleChildRef2 = () => {
        console.log('绑定在组件上的ref/ref函数,', this.createRefChild2)
        const msg =this.createRefChild2.say()
        console.log('msg-子组件', msg)
      }
     
    render() { 
        return (<div>
          <h3>7.1.2 父传子ref/refs</h3>
          <h4>(1).ref绑定在html元素上的使用</h4>
          {/* 一. ref绑定元素取值基本用法 */}
          {/*1. ref="字符串" */}
          {/* <input type="text" ref='inputRef' /> */}
          {/* 2.createRef */}
          <input type="text" ref={this.inputRef1} placeholder='請輸入内容..' />
          <button onClick={this.handleIpt}>获取input内容</button>
          {/* 3. refs函数 */}<br/>
          <input type="text" ref={this.setHandleRef} placeholder='請輸入内容..' />
          <button onClick={this.handleIpt1}> 获取inputRef2-refs方式</button>
          {/*二. 加载子组件 - 调用子组件的方式-父和子通信*/}
          <h4>(2). ref绑定组件上的使用</h4>
           <button onClick={this.handleChildRef}>获取组件的实例-ref字符串方式</button>
          <ChildRef ref='childRef1' />
          <ChildRef ref={this.createRefChild1} />
          <ChildRef ref={this.createRefChild1} />
          <ChildRef ref={this.setCreateChildRef} />
          <button onClick={this.handleChildRef1}>获取组件的实例React.createRef()API</button><br/>
          <button onClick={this.handleChildRef2}>获取组件的实例ref函数</button>
          
          
           
          
        </div>);
    }
}
 
export default ParentToChildRef;